
import { _decorator, Component, Node } from 'cc';
import { Locator } from '../../framework/utils/Locator';
import { VMCenter } from '../../framework/vm/VMCenter';
import { VMEntity } from '../../framework/vm/VMEntity';
import { DemoVMSceneBase } from './DemoVMSceneBase';
const { ccclass, property } = _decorator;

 import * as cc from "cc";
import { PageBase } from './page/PageBase';
import { PagePlayer } from './page/PagePlayer';
import { PageSkill } from './page/PageSkill';
import { PageBag } from './page/PageBag';
import { PageShop } from './page/PageShop';
@ccclass('DemoVMInstance')
export class DemoVMInstance  extends DemoVMSceneBase implements IMVVM{
    _vmTag: string;
    _vmEntitys: VMEntity[];
  
    pages: PageBase[] = [];
    
    data = {
    }


    start () {
        this.setBack("Canvas/background/player/Back Button");
    }



    onEnable(){
        VMCenter.add(this.data,this);
        let pages = this.pages;
        let buttonContainer = this.find("buttonContainer");
        let background = this.find("background");
        //#region ----------------new PageBase----------------------
        const pageMap = {
            "player": PagePlayer,
            "skill": PageSkill,
            "bag": PageBag,
            "shop": PageShop,
        }
        background.children.forEach((node)=>{
            let Clas = pageMap[node.name];
            let page: PageBase = new Clas();
            page.onCtor(node);
            pages.push(page);
        });

        console.log(`DemoVMInstance-> `);
        

        //#endregion ----------------new PageBase----------------------

        //#region ------------------ 切换页面 ------------------

        // 设置切换到第几页
        buttonContainer.children.forEach((node,index)=>{
            VMCenter.ButtonClick(this,node,{watchPath: "game.menu.state",operation(opts){
                return index;
            }})
        });

        // 改变标签按钮颜色
        VMCenter.Color(this,buttonContainer,{watchPath: "game.menu.state",controlChildren: true,formator(opts){
            return opts.newValue === opts.nodeIdx ? cc.Color.GRAY : cc.Color.WHITE;
        }});

        // 监听页码数据，显示对应的页码
        VMCenter.Children(this,background,{watchPath: "game.menu.state",formator(opts){
            // 冻结上一个页面
            if(opts.oldValue === opts.nodeIdx && opts.nodeIdx !== opts.newValue){
                pages[opts.nodeIdx].onFreeze();
            }
            // 激活当前选中的
            if(opts.nodeIdx === opts.newValue && opts.oldValue !== opts.nodeIdx){
                // 这里延迟一帧执行激活，防止数据没有更新
                setTimeout(() => {
                    pages[opts.nodeIdx].onActive(); 
                },0);
            }
            return opts.nodeIdx == opts.newValue;
        }});

        
        //#endregion  ------------------ 切换页面 ------------------


    }

    onDisable(){
        this.pages.forEach((page)=>{
            page.onUnloaded();
        });
        VMCenter.remove(this);
    }
    

    find(path){
        return Locator.locateNode(this.node,path);
    }
    // update (deltaTime: number) {
    //     // [4]
    // }
}

/**
 * [1] Class member could be defined like this.
 * [2] Use `property` decorator if your want the member to be serializable.
 * [3] Your initialization goes here.
 * [4] Your update function goes here.
 *
 * Learn more about scripting: https://docs.cocos.com/creator/3.4/manual/zh/scripting/
 * Learn more about CCClass: https://docs.cocos.com/creator/3.4/manual/zh/scripting/decorator.html
 * Learn more about life-cycle callbacks: https://docs.cocos.com/creator/3.4/manual/zh/scripting/life-cycle-callbacks.html
 */
